import { BaseFlexLeft } from "../../csscomponents/base";
import SvgIcon from "../svgIcon";
import {
  Avatar,
  Badge,
  Drawer,
  Dropdown,
  MenuProps,
  Space,
  Tooltip,
} from "antd";
import styled from "@emotion/styled";
import { useRecoilState } from "recoil";
import { userState } from "../../stores/user";
import { initialState, naviState } from "../../stores/navi";
import { useState, memo } from "react";
import { todoState } from "../../stores/todo";
/**
 * 顶部top-bar 左侧
 * @returns
 */

const TopbarRight = () => {
  const [sys, setUser] = useRecoilState(userState);
  const [, setNavi] = useRecoilState(naviState);
  const [open, setOpen] = useState(false);
  const [todoCount,] = useRecoilState(todoState);
  /**
   * 登出
   */
  function loginOut() {
    sessionStorage.removeItem("__BEEFSOLVE_BACKWEB__");
    sessionStorage.removeItem("__BEEFSOLVE_BACKWEB__NAVI__");
    setUser({
      token: "",
      userInfo: {
        sysId: "0",
        sysName: "",
        sysPassword: "",
        createTime: "",
        updateTime: "",
        sysAvater: "",
        unitId: "",
        sysRoleId: 0,
        phone: "",
        sysRole: {
          sysRoleId: 0,
          sysRoleName: "",
          sysRolePermisstion: "",
          createTime: "",
          updateTime: "",
        },
      },
      route: [],
    });
    setNavi(initialState);
    window.location.href = "/"
  }

  /**
   * 开启全屏
   */
  const requestFullScreen = () => {
    const rootView = document.getElementById("root-view");
    rootView?.requestFullscreen();
  };

  /**
   * 开启
   */

  const items: MenuProps["items"] = [
    {
      key: "1",
      label: (
        <BaseFlexLeft>
          <SvgIcon name="user" size={14} />
          <MarginText>个人中心</MarginText>
        </BaseFlexLeft>
      ),
    },
    {
      key: "2",
      label: (
        <BaseFlexLeft>
          <SvgIcon name="wrench" size={14} />
          <MarginText>设置</MarginText>
        </BaseFlexLeft>
      ),
    },
    {
      key: "3",
      danger: true,
      label: (
        <BaseFlexLeft
          onClick={() => {
            loginOut();
          }}
        >
          <MarginText>退出登录</MarginText>
        </BaseFlexLeft>
      ),
    },
  ];

  return (
    <>
      <Tooltip placement="bottomLeft" title={"天气"}>
        <div className="item">
          <SvgIcon name="cloud-hail" size={18} />
        </div>
      </Tooltip>
      <Tooltip placement="bottomLeft" title={"系统调试"}>
        <div className="item">
          <SvgIcon name="bug" size={18} />
        </div>
      </Tooltip>
      <Tooltip placement="bottomLeft" title={"全屏"}>
        <div
          className="item"
          onClick={() => {
            requestFullScreen();
          }}
        >
          <SvgIcon name="expand" size={18} />
        </div>
      </Tooltip>
      <Dropdown menu={{ items }} className="item">
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            <Avatar
              style={{
                border: "1px solid #ddd",
                boxShadow: "0 1px 4px rgba(0, 21, 41, .08)",
              }}
              src={
                sys.userInfo.sysAvater ||
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa6808c4d-deac-4102-8fcb-0164b258ffe5%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708594049&t=a5c1e8133d069b8174882032b1504f06"
              }
              size="large"
            ></Avatar>
            <span style={{ fontSize: "14px" }}>{sys.userInfo.sysName}</span>
          </Space>
        </a>
      </Dropdown>
      <Tooltip placement="bottomLeft" title={"通知"}>
        <div className="item shake">
          <Badge count={todoCount.count}>
            <SvgIcon name="bell" size={18} />
          </Badge>
        </div>
      </Tooltip>
      <Tooltip placement="bottomLeft" title={"系统设置"}>
        <div
          className="item"
          onClick={() => {
            setOpen(true);
          }}
        >
          <SvgIcon name="ellipsis-vertical" size={18} />
        </div>
      </Tooltip>
      <Drawer
        title="系统设置"
        onClose={() => {
          setOpen(false);
        }}
        open={open}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </>
  );
};

export default memo(TopbarRight);

const MarginText = styled.div`
  margin-left: 0.4rem;
`;
